// pages/scenic_detail/scenic_detail.ts

interface HealthIndex {
  name: string;
  value: string;
  percent: number;
  color: string;
  description: string;
}

interface SuitablePerson {
  icon: string;
  text: string;
  bgColor: string;
}

interface HealthTip {
  icon: string;
  text: string;
}

interface Review {
  id: number;
  username: string;
  avatar: string;
  rating: number;
  time: string;
  content: string;
  images: string[];
}

interface Transportation {
  icon: string;
  text: string;
}

interface Scenic {
  id: number;
  name: string;
  rating: number;
  tags: string[];
  location: string;
  distance: string;
  description: string;
  price: number;
  originalPrice: number;
  openTime: string;
  peakTime: string;
  images: string[];
  video: string;
  videoCover: string;
  videoDuration: string;
  gallery: string[];
  transportation: Transportation[];
  healthScore: number;
  healthComment: string;
  healthIndices: HealthIndex[];
  suitablePeople: SuitablePerson[];
  healthTips: HealthTip[];
  reviewCount: number;
  reviews: Review[];
}

interface Service {
  id: number;
  name: string;
  icon: string;
  description: string;
}

interface ServiceCategory {
  title: string;
  type: string;
  services: Service[];
}

Page({
  data: {
    scenic: {
      id: 1,
      name: '荔波小七孔',
      rating: 4.9,
      tags: ['森林负氧', '情绪调节', 'AAAA景区'],
      location: '贵州省黔南州荔波县',
      distance: '距您1080km',
      description: '荔波小七孔被誉为"地球上的绿宝石"，森林覆盖率高达97%，拥有世界喀斯特地貌精华。景区内负氧离子含量极高，常年保持在每立方厘米10万个以上，被誉为"天然氧吧"。\n\n景区以小七孔古桥为中心，包含天生桥、拉雅瀑布、卧龙潭、鸳鸯湖等景点，水系丰富，植被茂密，生态环境优越，是夏季避暑和全年康养的理想目的地。',
      price: 138,
      originalPrice: 150,
      openTime: '8:00-17:30（最晚入园16:30）',
      peakTime: '5月-10月',
      images: [
        'https://images.unsplash.com/photo-1529822438134-3adce6a81a09',
        'https://images.unsplash.com/photo-1501785888041-af3ef285b470',
        'https://images.unsplash.com/photo-1511497584788-876760111969'
      ],
      video: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400',
      videoCover: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470',
      videoDuration: '02:45',
      gallery: [
        'https://images.unsplash.com/photo-1501785888041-af3ef285b470',
        'https://images.unsplash.com/photo-1511497584788-876760111969',
        'https://images.unsplash.com/photo-1542273917363-3b1817f69a2d',
        'https://images.unsplash.com/photo-1544551763-46a013bb70d5',
        'https://images.unsplash.com/photo-1526481280693-3bfa7568e0f3',
        'https://images.unsplash.com/photo-1534067783941-51c9c23ecefd',
        'https://images.unsplash.com/photo-1553557202-e8e463c3053f',
        'https://images.unsplash.com/photo-1546708676-9fb5a2590adb'
      ],
      transportation: [
        { icon: 'car', text: '自驾：导航至"荔波小七孔景区"，有专用停车场' },
        { icon: 'bus', text: '公共交通：贵阳至荔波客车，到达后乘坐7路公交车至景区' },
        { icon: 'flight', text: '飞机：荔波机场距景区约30公里，可乘坐机场大巴或出租车' }
      ],
      // 康养指数数据
      healthScore: 95,
      healthComment: '荔波小七孔是国家级自然保护区，森林覆盖率高，负氧离子含量极高，适合深度放松身心，缓解疲劳和压力，改善呼吸系统健康。',
      healthIndices: [
        {
          name: '负氧离子',
          value: '极高',
          percent: 95,
          color: '#00a870',
          description: '每立方厘米空气中负氧离子含量超过10万个，远高于国家标准，有助于清洁呼吸道、改善睡眠。'
        },
        {
          name: '森林覆盖率',
          value: '97%',
          percent: 97,
          color: '#0052d9',
          description: '景区内森林覆盖率高达97%，植被茂密，空气湿润，适合呼吸系统疾病人群疗养。'
        },
        {
          name: '水系健康度',
          value: '优',
          percent: 90,
          color: '#0052d9',
          description: '景区内溪流、瀑布、湖泊众多，水质清澈，负离子浓度高，有助于心情舒缓。'
        },
        {
          name: '噪音指数',
          value: '低',
          percent: 85,
          color: '#00a870',
          description: '景区内自然环境优美，人为噪音少，有助于深度放松与休息。'
        }
      ],
      suitablePeople: [
        { icon: 'user', text: '亚健康人群', bgColor: 'bg-green-purple' },
        { icon: 'heart', text: '压力缓解', bgColor: 'bg-blue-indigo' },
        { icon: 'root-list', text: '呼吸系统', bgColor: 'bg-orange-red' },
        { icon: 'user-talk', text: '情绪调节', bgColor: 'bg-yellow-orange' },
        { icon: 'image', text: '艺术疗愈', bgColor: 'bg-blue-indigo' },
        { icon: 'device', text: '数字解毒', bgColor: 'bg-green-purple' }
      ],
      healthTips: [
        { icon: 'help-circle', text: '景区内山路较多，建议穿着舒适的鞋子，准备登山杖' },
        { icon: 'help-circle', text: '夏季蚊虫较多，请备好防蚊虫喷雾' },
        { icon: 'help-circle', text: '雨季道路湿滑，请注意安全' },
        { icon: 'help-circle', text: '景区内溪水清澈，可适当亲水，但请勿在未开放区域游泳' }
      ],
      // 评价数据
      reviewCount: 2354,
      reviews: [
        {
          id: 1,
          username: '旅行者123',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde',
          rating: 5,
          time: '2023-08-15',
          content: '景区环境非常好，空气清新，负氧离子含量高，待了一天感觉整个人都放松下来了。特别是拉雅瀑布，水流湍急，声音震撼，站在旁边感觉整个人都被净化了。',
          images: [
            'https://images.unsplash.com/photo-1546708676-9fb5a2590adb',
            'https://images.unsplash.com/photo-1511497584788-876760111969'
          ]
        },
        {
          id: 2,
          username: '绿野仙踪',
          avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
          rating: 4,
          time: '2023-07-22',
          content: '作为一个常年处于亚健康状态的IT工作者，来到小七孔后感觉呼吸都畅快了许多。森林浴非常舒服，整个人都轻松了。唯一的不足是旺季人有点多，建议错峰出行。',
          images: []
        },
        {
          id: 3,
          username: '山水间',
          avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36',
          rating: 5,
          time: '2023-06-30',
          content: '带父母来养生度假，效果非常好！景区内空气质量极佳，水质清澈。老人走完全程后精神状态明显好转。景区服务也很到位，有专门的休息区和医疗点。',
          images: [
            'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
          ]
        }
      ]
    } as Scenic,
    serviceCategories: [
      {
        title: '周边酒店',
        type: 'hotel',
        services: [
          {
            id: 1,
            name: '荔波小七孔森林度假酒店',
            icon: 'home',
            description: '距景区500米，提供免费接驳车，森林环绕'
          },
          {
            id: 2,
            name: '荔波悦椿温泉度假酒店',
            icon: 'home',
            description: '5星，距景区3公里，提供天然温泉和康养服务'
          }
        ]
      },
      {
        title: '餐饮美食',
        type: 'food',
        services: [
          {
            id: 3,
            name: '七孔农家乐',
            icon: 'shop',
            description: '景区旁，提供当地特色农家菜，食材新鲜'
          },
          {
            id: 4,
            name: '荔波味道主题餐厅',
            icon: 'shop',
            description: '提供少数民族特色菜，环境优美'
          }
        ]
      },
      {
        title: '康养服务',
        type: 'health',
        services: [
          {
            id: 5,
            name: '森林氧吧舱',
            icon: 'heart',
            description: '提供专业呼吸系统调理，每日限额'
          },
          {
            id: 6,
            name: '小七孔瑜伽中心',
            icon: 'user',
            description: '室内外瑜伽课程，专业导师指导'
          }
        ]
      }
    ] as ServiceCategory[],
    tabValue: 'detail', // 当前选中的标签页
    scrolled: false, // 是否已滚动
    isFavorite: false, // 是否收藏
    reviewFilter: 'all', // 评价筛选：all-全部，positive-好评，latest-最新
    filteredReviews: [] as Review[] // 筛选后的评价
  },

  onLoad: function (options: Record<string, string>) {
    // 获取景点ID
    const id = options.id;
    if (id) {
      // 根据ID从服务器获取景点详情
      // this.getScenicDetail(id);
    }
    
    // 初始化评价列表
    this.setData({
      filteredReviews: this.data.scenic.reviews
    });
  },

  onReady: function () {
    // 监听页面滚动
    wx.createIntersectionObserver().relativeToViewport().observe('.gallery-container', (res) => {
      if (res.intersectionRatio < 0.5) {
        this.setData({ scrolled: true });
      } else {
        this.setData({ scrolled: false });
      }
    });
  },

  // Tab切换
  onTabChange: function (e: any) {
    this.setData({
      tabValue: e.detail.value
    });
  },

  // 返回上一页
  navigateBack: function () {
    wx.navigateBack();
  },

  // 分享
  handleShare: function () {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  },

  // 收藏
  handleFavorite: function () {
    this.setData({
      isFavorite: !this.data.isFavorite
    });
    
    wx.showToast({
      title: this.data.isFavorite ? '已收藏' : '已取消收藏',
      icon: 'success'
    });
  },

  // 预览图片
  previewImage: function (e: any) {
    const index = e.currentTarget.dataset.index;
    wx.previewImage({
      current: this.data.scenic.images[index],
      urls: this.data.scenic.images
    });
  },

  // 预览图集
  previewGallery: function (e: any) {
    const index = e.currentTarget.dataset.index;
    wx.previewImage({
      current: this.data.scenic.gallery[index],
      urls: this.data.scenic.gallery
    });
  },

  // 查看所有图片
  viewAllImages: function () {
    wx.previewImage({
      current: this.data.scenic.gallery[0],
      urls: this.data.scenic.gallery
    });
  },

  // 播放视频
  playVideo: function () {
    if (this.data.scenic.video) {
      wx.navigateTo({
        url: `/pages/video_player/video_player?url=${encodeURIComponent(this.data.scenic.video)}&title=${encodeURIComponent(this.data.scenic.name)}`
      });
    }
  },

  // 打开地图位置
  openLocation: function () {
    // 这里应该有实际的经纬度数据
    // 示例数据
    wx.openLocation({
      latitude: 25.2185,
      longitude: 107.7547,
      name: this.data.scenic.name,
      address: this.data.scenic.location
    });
  },

  // 筛选评价
  setReviewFilter: function (e: any) {
    const filter = e.currentTarget.dataset.filter;
    this.setData({
      reviewFilter: filter
    });
    this.filterReviews();
  },

  // 处理评价筛选
  filterReviews: function () {
    let reviews = this.data.scenic.reviews;
    let filtered: Review[] = [];
    
    switch (this.data.reviewFilter) {
      case 'positive':
        filtered = reviews.filter(review => review.rating >= 4);
        break;
      case 'latest':
        filtered = [...reviews].sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime());
        break;
      default:
        filtered = reviews;
    }
    
    this.setData({
      filteredReviews: filtered
    });
  },

  // 预览评价图片
  previewReviewImage: function (e: any) {
    const reviewIndex = e.currentTarget.dataset.reviewIndex;
    const imgIndex = e.currentTarget.dataset.imgIndex;
    const review = this.data.scenic.reviews[reviewIndex];
    
    wx.previewImage({
      current: review.images[imgIndex],
      urls: review.images
    });
  },

  // 导航到服务详情
  navigateToService: function (e: any) {
    const id = e.currentTarget.dataset.id;
    const type = e.currentTarget.dataset.type;
    
    switch (type) {
      case 'hotel':
        wx.navigateTo({
          url: `/pages/hotel_detail/hotel_detail?id=${id}`
        });
        break;
      case 'food':
        wx.showToast({
          title: '餐厅详情开发中',
          icon: 'none'
        });
        break;
      case 'health':
        wx.navigateTo({
          url: `/pages/services/services?id=${id}`
        });
        break;
    }
  },

  // 预订
  handleBooking: function () {
    wx.navigateTo({
      url: `/pages/order_detail/order_detail?id=${this.data.scenic.id}&type=scenic`
    });
  },

  // 获取景点详情
  getScenicDetail: function (id: string) {
    wx.showLoading({
      title: '加载中',
    });
    
    // 这里应该是从服务器获取数据
    // 模拟API请求
    setTimeout(() => {
      // 如果是真实环境，这里会用实际接口返回的数据更新this.data.scenic
      
      // 获取完数据后，初始化筛选后的评价列表
      this.setData({
        filteredReviews: this.data.scenic.reviews
      });
      
      wx.hideLoading();
    }, 500);
  },

  onShareAppMessage: function () {
    return {
      title: `【贵州四季康养】${this.data.scenic.name} - ${this.data.scenic.tags[0]}`,
      path: `/pages/scenic_detail/scenic_detail?id=${this.data.scenic.id}`,
      imageUrl: this.data.scenic.images[0]
    };
  }
}) 